---
import { render } from "astro:content";
import MainLayout from "./MainLayout.astro";

const { entry } = Astro.props;
const { Content, headings } = await render(entry);
const inPageNavData = headings.map(heading => ({
  name: heading.text,
  url: heading.slug,
}));

---

<MainLayout>
  <slot />

  <script src="../components/ui-portal-inpage-nav.js" />

  <style>
    .container {
      display: flex;
      flex-direction: row;
      width: 100%;
    }
    .content {
      flex: 1 1 0;
      min-width: 0;
    }

    ui-portal-inpage-nav {
      width: 180px;
      flex: 0 0 180px;
    }
  </style>

  <div class="container">
    <div class="content">
      <Content />
    </div>

    <ui-portal-inpage-nav nav-data={JSON.stringify(inPageNavData)}></ui-portal-inpage-nav>
  </div>
</MainLayout>
